<template>
  <div>
    <el-container>
      <!-- <el-header>
        <div class="firstSytle">
        </div>
      </el-header>-->
      <el-main class="mainStyle">
        <!-- <img :src="this.userface" >
        <el-avatar :size="50" :src="this.infoForm.userface"></el-avatar>-->
        <!-- <el-avatar :size="50" :src="this.infoForm.userface"></el-avatar> -->
        <div class="infoStyle">
          <h1 style=" text-align: left;">个人信息</h1>
          <el-button type="text" @click="rePwd()">修改密码</el-button>
        </div>
        <el-form :model="infoForm" style="width:80%;">
          <el-form-item label="头像：" class="formStyle">
            <img :src="this.userface" style="width: 15%;" />
          </el-form-item>
          <el-form-item label="用户名：" class="formStyle">{{this.infoForm.uName}}</el-form-item>
          <el-form-item label="性别：" class="formStyle">{{this.infoForm.sex}}</el-form-item>
          <el-form-item label="年龄：" class="formStyle">{{this.infoForm.age}}</el-form-item>
          <el-form-item label="学号：" class="formStyle">{{this.infoForm.number}}</el-form-item>
          <el-form-item label="系别：" class="formStyle">{{this.infoForm.depart}}</el-form-item>
          <el-form-item label="专业：" class="formStyle">{{this.infoForm.special}}</el-form-item>
          <el-form-item label="电话：" class="formStyle">{{this.infoForm.tel}}</el-form-item>
          <el-button @click="updateInfo">修改个人信息</el-button>
        </el-form>
      </el-main>
    </el-container>
    <el-dialog width="40%" title="修改密码" :visible.sync="rePwdClick">
      <el-form :model="rePwdForm" label-width="120px" :rules="rules" ref="rePwdForm">
        <el-form-item label="旧密码: " prop="oldPwd">
          <el-input v-model="rePwdForm.oldPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码: " prop="newPwd">
          <el-input v-model="rePwdForm.newPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码: " prop="sureNewpwd">
          <el-input v-model="rePwdForm.sureNewpwd" type="password"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button type="primary" size="mini" @click="annulment('rePwdForm')">取 消</el-button>
        <el-button type="primary" size="mini" @click="sureRepwd('rePwdForm')">确 认</el-button>
      </div>
    </el-dialog>
    <!-- 修改个人信息 -->
    <el-dialog width="50%" title="修改个人信息" :visible.sync="updateInfoClick">
      <el-form :model="updateForm" label-width="110px" :rules="rules" ref="updateForm">
        <el-form-item label="用户名：">
          <el-input v-model="updateForm.uName"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="updateForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="updateForm.age"></el-input>
        </el-form-item>
        <el-form-item label="学号：">
          <el-input v-model="updateForm.number" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="系别：">
          <el-input v-model="updateForm.depart" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="专业：">
          <el-input v-model="updateForm.special" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话：" prop="tel">
          <el-input v-model.number="updateForm.tel"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="mini" @click="updateInfoClick=false">取 消</el-button>
        <el-button type="primary" size="mini" @click="sureUpdate('updateForm')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from "element-ui";
import {
  getRequest,
  postMethod,
  postRequest,
  putRequest
} from "../../utils/api";

export default {
  data() {
    var valiuTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        // if (!Number.isInteger(value)) {
        //   callback(new Error("请输入数字值"));
        // } else {
          if (value.toString().length != 11) {
            callback(new Error("请输入11位手机号"));
          } else {
            callback();
          }
        // }
      }, 100);
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输新入密码"));
      } else {
        if (this.rePwdForm.newPwd !== "") {
          this.$refs.rePwdForm.validateField("sureNewpwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.rePwdForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      infoForm: {
        // userface:"",
        uName: "",
        tel: "",
        sex: "",
        age: "",
        number: "",
        depart: "",
        special: ""
      },
      updateForm: {
        // userface:"",
        uName: "",
        tel: "",
        sex: "",
        age: "",
        number: "",
        depart: "",
        special: ""
      },
      userface: "",
      rePwdClick: false,
      updateInfoClick: false,
      rePwdForm: {
        oldPwd: "",
        newPwd: "",
        sureNewpwd: ""
      },
      user: {
        password: "",
        pwdNew: ""
      },
      rules: {
        oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass1, trigger: "blur" }],
        sureNewpwd: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        tel: [{ validator: valiuTel, trigger: "blur" }]
      }
    };
  },
  methods: {
    getUserInfo() {
      var info = localStorage.getItem("info");
      var infoArr = [];
      var x = info.indexOf(",");
      for (var i = 0; i < info.length; i++) {
        if (x > 0) {
          infoArr.push(x);
          x = info.indexOf(",", x + 1);
        }
      }
      // console.log(info)
      var subName = info.indexOf("uname");
      var tempName = info.slice(subName + 8, infoArr[35] - 1);
      var subSex = info.indexOf("sex");
      var tempSex = info.slice(subSex + 5, infoArr[4]);
      var subAge = info.indexOf("age");
      var tempAge = info.slice(subAge + 5, infoArr[5]);
      var subNumber = info.indexOf("number");
      var temoNumber = info.slice(subNumber + 9, infoArr[6] - 1);
      var subDepart = info.indexOf("depart");
      var tempDepart = info.slice(subDepart + 9, infoArr[9] - 1);
      var subSpecial = info.indexOf("special");
      var tempSpecial = info.slice(subSpecial + 10, infoArr[10] - 1);
      var subTel = info.indexOf("tel");
      var tempTel = info.slice(subTel + 6, infoArr[11] - 1);

      this.userface = localStorage.getItem("userface");
      this.infoForm.uName = tempName;
      this.infoForm.sex = tempSex ? "男" : "女";
      this.infoForm.age = tempAge;
      this.infoForm.number = temoNumber;
      this.infoForm.depart = tempDepart;
      this.infoForm.special = tempSpecial;
      this.infoForm.tel = tempTel;
      // console.log(this.userface)
    },
    rePwd() {
      this.rePwdClick = true;
    },
    sureRepwd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          postRequest("system/user/changePwd", {
            uName: this.infoForm.uName,
            password: this.rePwdForm.oldPwd,
            pwdNew: this.rePwdForm.newPwd
          }).then(resp => {
            if (resp && resp.status == 200) {
              this.rePwdClick = false;
              this.rePwdForm = {};
              console.log(resp);
              Message.success("修改成功");
            }
          });
        } else {
          this.$message.error("出错啦~~~~~");
          return false;
        }
      });
    },
    annulment(formName) {
      this.$refs[formName].resetFields();
      this.rePwdClick = false;
    },
    getUserInfoNew() {
      var _this = this;
      this.getRequest("system/user/show/center").then(resp => {
        _this.tableLoading = false;
        if (resp && resp.status == 200) {
          this.userface = localStorage.getItem("userface");
          this.infoForm.uName = resp.data.uname;
          this.infoForm.sex = resp.data.sex ? "男" : "女";
          this.infoForm.age = resp.data.age;
          this.infoForm.number = resp.data.number;
          this.infoForm.depart = resp.data.depart;
          this.infoForm.special = resp.data.special;
          this.infoForm.tel = resp.data.tel;
          this.infoForm.id = resp.data.id;
        }
      });
    },

    updateInfo() {
      this.updateForm = this.infoForm;
      console.log(this.updateForm.sex)
      if(this.updateForm.sex =='男'){
        this.updateForm.sex =1
      }else{
         this.updateForm.sex =0
      }
      this.updateInfoClick = true;
    },
    sureUpdate(formName) {
      this.$refs[formName].validate( valid=>{
        if(valid){
          postMethod('system/user/alter',this.updateForm).then(resp =>{
            if (resp && resp.status == 200) {
              this.updateInfoClick = false;
              console.log(resp);
              Message.success("修改成功");
            }
          })
        }
      })
    }
  },
  created() {
    // this.getUserInfo();
    this.getUserInfoNew();
  }
};
</script>
<style>
.firstSytle {
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.formStyle {
  border-bottom: 1px rgb(189, 189, 189) solid;
}

.infoStyle {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mainStyle {
  width: 100%;
  height: 100%;
  margin-left: 150px;
  /* display: flex;
    flex-direction: column;
    justify-content: center; */
}
</style>
